<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>
<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>


<html>
<head>
<title>Choose calendar</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/jquery.tagsinput.css" rel="stylesheet"/>
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<link href="css/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="all"/>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/daterangepicker.js"></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script src='fullcalendar/lang/all.js'></script>
<script src='fullcalendar/lang/vi.js'></script>

</head>

<body>

	<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i><a href="./Index.do">Trang chủ</a></li>
					<li class="active">Cấu hình đồng bộ</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
		<tag:SideBarTag active_area="7"></tag:SideBarTag>

		<div class="main-content">
			<tag:MessageAlertTag></tag:MessageAlertTag>
			<div class="page-header">
				<h1 style="padding-left:20px; color: grey;">Xin hãy chọn một lịch mà bạn cần hệ thống đồng bộ</h1>
			</div>
			
            <div class="page-content" style="width: 70%">
			<br/>
			<s:set var="allCalendar" value="%{#request.ALL_CALENDAR_NEED_TO_CHOOSE}"></s:set>
			<s:if  test="%{#allCalendar != null}">			
			<form action="ChooseCalendar.do">
				<table class="table">
					<tr class="success">
						<th>Địa chỉ email</th>
						<th>Các lịch đang tồn tại</th>
					</tr>
					<%-------Classification (GoogleCalendar, OutlookCalendar)-----%>
					
					
					<%-------Read the GoogleCalendar type (containt map of email and calendarList) -----%>
					<s:if test="%{#allCalendar.GOOGLE_CALENDAR != null}">						
						<s:iterator var="google_email_calendar_iterator" value="%{#allCalendar.GOOGLE_CALENDAR}">
							<s:set var="emailAddress" value="%{key}"/>
							<s:set var="calendar_list" value="%{value}"/>	
							<s:if test="%{#calendar_list.size() > 0}">						
								<tr>
							    	<td><s:property value="%{#emailAddress}"/></td>
							    	<td>
										<%-------read each calendar object in calendar_list-----%>
										<s:iterator var="item" value="%{#calendar_list}">
											<label class="radio">
												<input type="radio" name="chooseGoogleCalendar" 
													value="GOOGLE_CALENDAR|${emailAddress}|${item.id}">
											 		<s:property value="%{#item.summary}"/>
											</label>
										</s:iterator>
									</td>
							  	</tr>
						  	</s:if>
							<s:else>
								<tr>
							    	<td><s:property value="%{#emailAddress}"/></td>
							    	<td>
										Chưa lấy được các bộ lịch đang tồn tại
									</td>
							  	</tr>
							  	
							</s:else>
						</s:iterator>							
					</s:if>
					
					<%-------Read the OutlookCalendar type (containt map of email and calendarList) -----%>
					<s:if test="%{#allCalendar.OUTLOOK_CALENDAR != null}">
						<s:iterator var="outlook_email_calendar_iterator" value="%{#allCalendar.OUTLOOK_CALENDAR}">
							<s:set var="emailAddress" value="%{key}"/>
							<s:set var="calendar_list" value="%{value}"/>
								<s:if test="%{#calendar_list.size() > 0}">
									<tr>
								    	<td><s:property value="%{#emailAddress}"/></td>
								    	<td>
											<%-------read each calendar object in calendar_list-----%>
											<s:iterator var="item" value="%{#calendar_list}">
												<label class="radio">
													<input type="radio" name="chooseOutlookCalendar" 
														value="OUTLOOK_CALENDAR|${emailAddress}|${item.id}">
												 		<s:property value="%{#item.name}"/>
												</label>
											</s:iterator>
										</td>
								  	</tr>	
							  	</s:if>
								<s:else>
									<tr>
								    	<td><s:property value="%{#emailAddress}"/></td>
								    	<td>
											Chưa lấy được các bộ lịch đang tồn tại
										</td>
								  	</tr>
								</s:else>					
						</s:iterator>	
							
					</s:if>								  
					</table>
						<button type="submit" onclick="accept('')" class="btn btn-sm btn-success">Đồng ý</button>	
				</form>	
									
				</s:if>
				<s:else>
					Hệ thống đang bận nên chưa thể trả kết quả về cho bạn!
				</s:else>
			
			</div>
	        		
		</div>
	</div>
</body>
</html>